<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section{
            height: 100px;
            width: 100px;
            background-color: red;
            margin: 10px;
        }
        .active{
            color: #fff;
            background-color: blue;
        }
        .active_f{
            color:aqua;
            background-color: orange;
        }
        .current{
            font-size: 20px;
        }
    </style>
    <script src="./vue.js"></script>
    <script>
        window.onload=function(){
            var app=new Vue({
                el:'#app',
                data:{
                    name:'lisi',
                    age:20,
                    gender:'men',
                    htmlstr:'<h1>hello</h1>',
                    id:'one',
                    current:'1',
                    list:['苹果','香蕉','猕猴桃','桃子','西瓜'],
                    students:[{
                        name:'lisi',
                        age:20
                    },{
                        name:'nana',
                        age:10
                    },{
                        name:'wang',
                        age:22
                    },{
                        name:'zhao',
                        age:19
                    }],
                    object:{
                        name:'lisi',
                        age:22,
                        gender:'men'
                    },
                    active:'active',
                    isactive:false,
                    current:'current',
                    active_f:"active_f",
                    a:"blue",
                    b:"20px"
                },
                methods:{
                    handler2:function(){
                        alert('222222222')
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app"> 
        <section v-bind:style='{color:a,fontSize:b}'>style---</section>
        <hr>
        <section v-bind:class='[isactive?active:active_f,current]'>hello</section>
        <section v-bind:class='{active:isactive}'>hello</section>
        <hr>
        <ul>
            <li v-for='(value,key,index) in object'>{{key}}-{{value}}-{{index}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for='item in students'>{{item.name}}-{{item.age}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for='(item,index) in list'>{{item}}-{{index}}</li>
        </ul>
        <hr>
        <section v-show='current==1'>show</section>
        <hr>
        <template v-if='current==1'>
            <section>1111</section>
            <section>2222</section>
            <section>3333</section>
        </template>
        <template  v-else>
            <section>4444</section>
            <section>5555</section>
            <section>6666</section>
        </template>
        <!-- <section v-if='current==1'>1111</section>
        <section v-else-if='current==2'>2222</section>
        <section v-else='current==3'>3333</section> -->
        <hr>
        <p>{{name}}-{{age+10}}</p>
        <p v-html='htmlstr'>tom</p>
        <p v-bind:id='id'></p>
        <p :id='id'></p>
        <p v-on:click='handler2'>click</p>
        <p @click='handler2'>!!!!!!!!</p>
    </div>
</body>
</html>